<?php
require_once (__DIR__."/include.php");
$site = "http://".$_SERVER['HTTP_HOST'];
if ( !isset($_GET['hall']) )
	die();
$hallID = (int)$_GET['hall'];
if( empty($hallID) )
	die();
$db = new DB();
$sql = "SELECT 
  `object_hall`.`src` AS `src`,
  `object_hall`.`name_".LANG."` AS `hall_name`,
  `object_table_layout`.`pan` AS `pan`,
  `object_table_layout`.`tilt` AS `tilt`,
  `object_table_layout`.`text_".LANG."` AS `text`,
  `օbject_table`.`status` AS `status`,
  `օbject_table`.`id` AS `id`,
  `օbject_table`.`name_".LANG."` AS `table_name`
FROM `object_hall`
LEFT OUTER JOIN `object_table_layout` ON
( `object_hall`.`id` = `object_table_layout`.`object_hall_id` )
INNER JOIN `օbject_table` ON
( `object_table_layout`.`object_table_id` = `օbject_table`.`id` AND `օbject_table`.`enable` = TRUE )
WHERE `object_hall`.`id` = {$hallID} AND `object_hall`.`enable` = TRUE";
$res = $db->query($sql,1);
if( $res === false ) {
	$error = $GLOBALS['error'];
	die( $error->getUserMessage() );
}
$idToTitle = array();
$idToIndex = array();
$jsonString = array(); 
$img = ( !empty($res[0]['src']) ) ? $site.$res[0]['src'] : '';
$length = count($res);
for ($i = 0; $i < $length; $i++) {
	$idToIndex[(string)$res[$i]['id']] = $i;
	$idToTitle[(string)$res[$i]['id']] = $res[$i]['table_name'];
	$I = $site."/images/diter/";
	if( $res[$i]['status'] == 0 ) {
		$I .= "free.png";
	} elseif ( $res[$i]['status'] == 1 ) {
		$I .= "busy.png";
	}	 
	$jsonString[] = "{pan:{$res[$i]['pan']}, tilt:{$res[$i]['tilt']}, url:\"javascript:order({$res[$i]['id']})\", text:'{$res[$i]['text']}', img:'{$I}'}";
}
$hotspots = implode(', ', $jsonString);
$jsonIDToTitle = json_encode($idToTitle);
$jsonIDToIndex = json_encode($idToIndex);
$imgList = "[{src:'{$img}', title:'{$res[0]['hall_name']}', projection:'spherical', hotspots:[{$hotspots}] }]";
$html = <<<HTML
<!DOCTYPE html>
<html>
<head>
  <title>Panorado JS Demo</title>
  <link rel="stylesheet" type="text/css" href="{$site}/template/admin/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="{$site}/template/admin/css/jquery-ui-1.10.0.custom.css" />
  <link rel="stylesheet" type="text/css" href="{$site}/template/menu/css/default.css" />
  <link rel="stylesheet" type="text/css" href="{$site}/template/menu/css/component.css" />
		  
  <script src="{$site}/js/diter/shadow_1.js"></script>
  <script src="{$site}/js/diter/panorado-min.js"></script>
  <script src="{$site}/js/jquery/jquery-1.9.1.min.js"></script>
  <script src="{$site}/js/jquery/jquery-ui.min.js"></script>
  <script src="{$site}/js/jquery/bootstrap.min.js"></script>

  <script src="{$site}/js/json/jquery.json-2.4.min.js"></script>
  <script src="{$site}/js/remote/call.js"></script>
  <script src="{$site}/js/diter/diter.js"></script>

  <script src="{$site}/js/menu/modernizr.custom.js"></script>

  <script type="text/javascript">
    var imgFree = "{$site}/images/diter/free.png";
    var imgBusy = "{$site}/images/diter/busy.png";
    var IDtoTitle = {$jsonIDToTitle};
    var IDtoIndex = {$jsonIDToIndex};
    var imgList = {$imgList};
    var hallID = {$hallID};
  </script>
  <style>
	#menu {
		position: fixed;
		display: block;
		width: 48px;
		height: 48px;
		left: 0px;
		top: 0px;
	}
	#nav-trigger {
		float: left;
		cursor: pointer;
		position: relative;
		z-index: 2;
		background-color: #47a3da;
	}
	.menu-icon {
		display: block;
		background: transparent url('{$site}/template/menu/img/menu-sprite.svg') no-repeat;
		background-size: auto 100%;
		height: 3em;
		width: 3em;
	}
	.active .icon-menu {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.icon-menu {
		background-position: 0 0;
	}
	.icon-menu {
		transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-moz-transition: -moz-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-webkit-transition: -webkit-transform 0.3s 	cubic-bezier(0.785, 0.135, 0.15, 0.86);
		-o-transition: -o-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	}
  </style>
</head>

<body style="overflow: hidden;" >

		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s1">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav>
	<!--	<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav>
		<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav>
		<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
			<h3>Menu</h3>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
			<a href="#">Celery seakale</a>
			<a href="#">Dulse daikon</a>
			<a href="#">Zucchini garlic</a>
			<a href="#">Catsear azuki bean</a>
			<a href="#">Dandelion bunya</a>
			<a href="#">Rutabaga</a>
		</nav> -->
	<canvas id="diter" >
         Please update your browser for HTML5 support!
	</canvas>
	<div id="menu">
		<a id="nav-trigger" ><i class="menu-icon icon-menu"></i></a>
	</div>
	<script src="{$site}/js/menu/classie.js"></script>
	<script>
		var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
			menu = document.getElementById( 'nav-trigger' );

		menu.onclick = function() {
			classie.toggle( menuLeft, 'cbp-spmenu-open' );
			menu.className = (menu.className == "" ) ? "active" : "";
		};
		menuLeft.onclick = function() {
			classie.toggle( menuLeft, 'cbp-spmenu-open' );
			menu.className = "";
		}
	</script>
</body>
</html>
HTML;
echo $html;
?>